<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/echarts.js"></script>
    <!--   <script type="text/javascript" src="js/echarts.common.min.js"></script> -->
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            overflow: scroll;
        }
        *::-webkit-scrollbar{
            width: 0;height: 0;
        }
        .cvs{
            width: 50%;
            height: 60%;
            float: left!important;

        }
        form{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .footer{
            width: 100%;
            position:absolute;
            bottom: 10%;
            height: 70px;
            left: 0;
            text-align: left;
            padding-left: 10%;
            box-sizing: border-box;

        }
        .footer-cont{
            width: 100%;
            height: 70px;
            text-align: left;

        }
        .footer-cont a{
            font-size: 22px;
            width: 100px;
            height: 50px;
            line-height: 50px;
        }
        .footer-cont p{
            height: 70px;
            width: auto;
            display: inline-block;
            vertical-align: middle;
            line-height: 70px;
            margin-left: 5%;
            font-size: 22px;
        }
        #wallet:before{
            content: "余额：￥";
        }
        #js-wallet:before{
            content: "预收款金额：￥";
        }
        .say{
            width: 100%;
            box-sizing: border-box;
            bottom: 5%;
            height: 5%;
            left: 0;
            position: absolute;
            padding-left: 10%;
            color: red;
            font-size: 18px;

        }
        .footer-cont label{
            font-size: 14px;
            width: 150px;
        }
        .footer-cont .layui-input-inline{
            width: 70px;
        }
        .zf-lay{
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 20px;
        }
        .lay-tit{
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 22px;
            text-align: center;
            margin-bottom: 10px;
        }
        #qcode{
            width: 260px;
            height: 260px;
            position: relative;
        }
        /*#qcode #lay-dd{*/
        /*    width: 260px;*/
        /*    height: 260px;*/
        /*    position: absolute;*/
        /*    left: 0;*/
        /*    top: 0;*/
        /*    z-index: 11;*/
        /*    background-image: url("image/3.gif");*/
        /*    background-repeat: no-repeat;*/
        /*    background-position: center;*/
        /*}*/
        /*#qcode #lay-yes{*/
        /*    width: 260px;*/
        /*    display: none;*/
        /*    height: 260px;*/
        /*    position: absolute;*/
        /*    left: 0;*/
        /*    top: 0;*/
        /*    z-index: 11;*/
        /*    background-image: url("image/tb_yes.png");*/
        /*    background-repeat: no-repeat;*/
        /*    background-position: center;*/
        /*    background-color:rgba(255,255,255,0.7);*/
        /*}*/
        .lay-monery{
            width: 100%;
            height: 20px;
            font-size: 16px;
            text-align: center;
            line-height: 20px;
            margin-top: 10px;
        }
        #main2{
            display: block;
            float: left;
            width: 100%;
            text-align: center;
            margin-top: 57px;
        }
    </style>
</head>
<body>
<form class="layui-form" id="addmerchant">
    <!--       <div class="layui-form"> -->
    <!--           <div class="layui-form-item"> -->
    <!--             <div class="layui-inline"> -->
    <!--               <label class="layui-form-label">开始日期</label> -->
    <!--               <div class="layui-input-inline"> -->
    <!--                 <input type="text" class="layui-input" id="test6"> -->
    <!--             </div> -->
    <!--             <label class="layui-form-label">结束日期</label> -->
    <!--             <div class="layui-input-inline"> -->
    <!--                 <input type="text" class="layui-input" id="test7"> -->
    <!--             </div> -->

    <!--     <button class="layui-btn layui-btn-primary" type="button" onclick="check()">查询</button> -->
    <!-- </div> -->

    <!-- </div> -->
    <!-- </div> -->

    <div class="cvs" id="main1" style=""></div>
    <div class="cvs" id="main" style="" ></div>




</form>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<script src="../layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/tool.js"></script>
<script type="text/javascript">

    var startTime=getNowFormatDate();

    layui.use(['form', 'layedit', 'laydate','layer'], function(){
        var laydate = layui.laydate;
        var layer=layui.layer;

        var form = layui.form,
            $=layui.$;

        laydate.render({
            elem: '#test6'
            ,value: startTime
            ,isInitValue: true
        });

        laydate.render({
            elem: '#test7'
            ,value: startTime
            ,isInitValue: true
        });
        //日期范围
        laydate.render({
            elem: '#test6'
            ,range: true
        });

    });
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart1 = echarts.init(document.getElementById('main1'));




    // var option = {
    //     title: {
    //         text: '垃圾投递统计',
    //         left: 'center'
    //     },
    //     tooltip : {
    //         trigger: 'item',
    //         formatter: "{a} <br/>{b} : {c} ({d}%)"
    //     },
    //     legend: {
    //         // orient: 'vertical',
    //         // top: 'middle',
    //         bottom: 10,
    //         left: 'center',
    //         data: ['已使用','未使用']
    //     },
    //     series : [
    //         {
    //             type: 'pie',
    //             radius : '65%',
    //             center: ['50%', '50%'],
    //             selectedMode: 'single',
    //             data:[
    //                 {
    //                     value:0,
    //                     name: '未使用'
    //                 },
    //                 {value:0, name: '已使用'},
    //
    //
    //             ],
    //
    //         }
    //     ]
    // };


    // 异步加载数据
    $.ajax({
        autoAddUrl:false,
        url:"/refuse-web/admin/getRefuseTj",
        type:"get",
        success:function(data){//'user/gettjdata?startTime='+startTime+"&endTime="+startTime).done(function (data) {

            // 填入数据
            // myChart.setOption(option)
            // myChart.setOption({
            //     series: [{
            //         data:[
            //             {
            //                 // 根据名字对应到相应的系列
            //                 name: '未使用',
            //                 value: data.result.wsynum
            //             },{
            //                 // 根据名字对应到相应的系列
            //                 name: '已使用',
            //                 value: data.result.synum
            //             }
            //         ]}]
            // });
            myChart.setOption(
                {
                    title : {
                        text: '垃圾金额统计'

                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['大件垃圾','可回收垃圾','普通垃圾']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : [data.month4,data.month3,data.month2,data.month1,data.month]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLabel : {
                                formatter: '{value}'
                            }
                        }
                    ],
                    series : [
                        {
                            name:'大件垃圾',
                            type:'line',
                            data:[data.mlmonth4,data.mlmonth3,data.mlmonth2,data.mlmonth1,data.mlmonth],
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name:'可回收垃圾',
                            type:'line',
                            data:[data.mrmonth4,data.mrmonth3,data.mrmonth2,data.mrmonth1,data.mrmonth],
                            markPoint : {
                                data : [
                                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name : '平均值'}
                                ]
                            }
                        },
                        {
                            name:'普通垃圾',
                            type:'line',
                            data:[data.mnmonth4,data.mnmonth3,data.mnmonth2,data.mnmonth1,data.mnmonth],
                            markPoint : {
                                data : [
                                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name : '平均值'}
                                ]
                            }
                        }

                    ]
                }
            );


            myChart1.setOption(
                {
                    title : {
                        text: '垃圾重量统计'

                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['大件垃圾','可回收垃圾','普通垃圾']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : [data.month4,data.month3,data.month2,data.month1,data.month]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLabel : {
                                formatter: '{value}'
                            }
                        }
                    ],
                    series : [
                        {
                            name:'大件垃圾',
                            type:'line',
                            data:[data.lmonth4,data.lmonth3,data.lmonth2,data.lmonth1,data.lmonth],
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name:'可回收垃圾',
                            type:'line',
                            data:[data.rmonth4,data.rmonth3,data.rmonth2,data.rmonth1,data.rmonth],
                            markPoint : {
                                data : [
                                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name : '平均值'}
                                ]
                            }
                        },
                        {
                            name:'普通垃圾',
                            type:'line',
                            data:[data.nmonth4,data.nmonth3,data.nmonth2,data.nmonth1,data.nmonth],
                            markPoint : {
                                data : [
                                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name : '平均值'}
                                ]
                            }
                        }

                    ]
                }
            );

        }
    });


    //获取当前时间，格式YYYY-MM-DD
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
    //查询
    function check(){
        var startTime=$("#test6").val();
        var endTime=$("#test7").val();
        var name=$("#jdname").val();
        // 异步加载数据
        $.ajax({
            autoAddUrl:false,
            url:"/synew/user/gettjdata",
            type:"POST",
            data:{
                startTime:startTime,
                endTime:endTime,
                name:name
            },
            success:function(data){
                // 填入数据
                myChart.setOption(option)
                myChart.setOption({
                    series: [{
                        data:[
                            {
                                // 根据名字对应到相应的系列
                                name: '未支付订单',
                                value: data.result.fnum
                            },{
                                // 根据名字对应到相应的系列
                                name: '成功订单',
                                value: data.result.snum
                            }
                        ]}]
                });

                myChart1.setOption({
                    xAxis: {
                        data: [new Date(new Date().getTime()-86400000*2).getJSON(),new Date(new Date().getTime()-86400000).getJSON(),"合计"]
                    },
                    series: [{
                        data:[data.result.smoney2,data.result.smoney1,data.result.smoney],
                    }],


                });
            }});
    }

</script>





<script>


</script>

</body>
</html>